<template>
	<view class="container">
		<!-- 我的页面 -->
		<u-navbar title="个人中心" bg-color="#00000000" leftIcon=" " titleStyle="color:#fff" leftIconColor="#fff"
			placeholder></u-navbar>
		<view class="content">
			<view class="top">
				<view class="pic" @click="goUserInfo">
					<image src="http://www.img.ttblog.cn/car/user-icon.jpg" mode="aspectFill"></image>
				</view>
				<view class="info" @click="goUserInfo">
					小李子<text>18766663333</text>
				</view>
			</view>

			<view class="main">
				<!-- {borderRadius:'18rpx',display:'flex',justifyContent: 'center',width:'100%'} -->
				<!-- :customStyle="{backgroundColor:'#fff'}" -->

				<u-cell-group :border="false">
					<!-- 我的优惠券开始 -->
					<u-cell title="我的优惠券" isLink url="/pages/My/MyCoupon" center icon="/static/images/my-coupon.png" value="10张"
						size="large" :border="false">
					</u-cell>
					<!-- 我的优惠券结束 -->
					<!-- 我的订单开始 -->
					<u-cell size="large" :border="false">
						<view class="title" slot="title">
							<text>我的订单</text>
							<navigator url="/pages/My/MyOrder/MyOrder?type=0">
								<u-icon label="我的订单" labelPos="left" name="arrow-right"></u-icon>
							</navigator>
						</view>
						<view class="label" slot="label">
							<navigator class="pic" url="/pages/My/MyOrder/MyOrder?type=1">
								待支付
							</navigator>
							<navigator class="pic" url="/pages/My/MyOrder/MyOrder?type=2">
								待使用
							</navigator>
							<navigator class="pic" url="/pages/My/MyOrder/MyOrder?type=3">
								待评价
							</navigator>
						</view>
					</u-cell>
					<!-- 我的订单结束 -->
					<!-- 我的服务开始 -->
					<u-cell size="large" :border="false">
						<view class="title" slot="title">
							<text>我的服务</text>
						</view>
						<view class="bottom" slot="label">
							<navigator class="box" url="/pages/My/CouponCenter">
								<view class="pic">
									<image src="/static/images/myservice-icon1.png" mode="scaleToFill"></image>
								</view>
								<view class="info">
									领券中心
								</view>
							</navigator>

							<view class="box" @click="open">
								<view class="pic">
									<image src="/static/images/myservice-icon2.png" mode="scaleToFill"></image>
								</view>
								<view class="info">
									邀请好友
								</view>
							</view>

							<navigator class="box" url="/pages/My/MyCar/MyCar">
								<view class="pic">
									<image src="/static/images/myservice-icon3.png" mode="aspectFill"></image>
								</view>
								<view class="info">
									我的车辆
								</view>
							</navigator>

							<navigator class="box" url="/pages/My/ExpenseRecord">
								<view class="pic">
									<image src="/static/images/myservice-icon4.png" mode="aspectFill"></image>
								</view>
								<view class="info">
									消费记录
								</view>
							</navigator>

							<navigator class="box" url="/pages/My/MyRepair/MyRepair">
								<view class="pic">
									<image src="/static/images/myservice-icon5.png" mode="aspectFill"></image>
								</view>
								<view class="info">
									我的维修
								</view>
							</navigator>

							<navigator class="box">
								<view class="pic">
									<image src="/static/images/myservice-icon6.png" mode="aspectFill"></image>
								</view>
								<view class="info">
									意见反馈
								</view>
							</navigator>

							<navigator class="box">
								<view class="pic">
									<image src="/static/images/myservice-icon7.png" mode="aspectFill"></image>
								</view>
								<view class="info">
									收货地址
								</view>
							</navigator>

						</view>
					</u-cell>
					<!-- 我的服务结束 -->
				</u-cell-group>
				<u-button shape="circle" @click="logout">退出登录</u-button>
				<view class="placeholder"></view>



			</view>
			<!-- 分享 -->
			<u-popup :show="show" @close="close">
				<view class="share">
					<view class="title">
						分享到
					</view>
					<view class="box">
						<view class="item">
							<view class="pic">
								<u-icon name="weixin-fill" color="#fff" size="34"></u-icon>
							</view>
							<text>微信</text>
						</view>
						<view class="item">
							<view class="pic">
								<u-icon name="moments" color="#fff" size="34"></u-icon>
							</view>
							<text>朋友圈</text>
						</view>
						<view class="item">
							<view class="pic">
								<u-icon name="qq-fill" color="#fff" size="34"></u-icon>
							</view>
							<text>QQ</text>
						</view>
						<view class="item">
							<view class="pic">
								<u-icon name="qzone" color="#fff" size="34"></u-icon>
							</view>
							<text>QQ空间</text>
						</view>
						<view class="item">
							<view class="pic">
								<u-icon name="weibo" color="#fff" size="34"></u-icon>
							</view>
							<text>微博</text>
						</view>
						<view class="item">
							<view class="pic">
								<u-icon name="zhihu" color="#fff" size="34"></u-icon>
							</view>
							<text>知乎</text>
						</view>
					</view>
				</view>
			</u-popup>
		</view>

		<TabBar></TabBar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
			};
		},
		methods: {
			goUserInfo() {
				uni.navigateTo({
					url: '/pages/My/UserInfo/UserInfo'
				})
			},
			// 邀请好友
			showShare() {

			},
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			
			logout(){
				uni.reLaunch({
					url:'/pages/Login/Login',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: absolute;
		top: 0;

		.top {
			width: 750rpx;
			height: 500rpx;
			background-image: url('http://www.img.ttblog.cn/car/header-bg.png');
			background-size: cover;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.pic {
				margin-top: 100rpx;
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				/* 前内层边框 */
				/* 后外层边框*/
				box-shadow: 0 0 0 6px #68a5ff, 0 0 0 12px #3893fc;
				overflow: hidden;
				margin-bottom: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info {
				color: #fff;

				text {
					font-size: 26rpx;
					margin-left: 18rpx;
				}
			}
		}

		.main {
			transform: translateY(-75rpx);
			padding: 0 20rpx;

			/deep/ .u-cell {
				justify-content: center;
				border-radius: 18rpx;
				background-color: #fff;
				margin-bottom: 20rpx;

				&:nth-child(1) {
					height: 120rpx;
				}
			}

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 15rpx;
				border-bottom: 1px solid #ccc;
			}

			.label {
				display: flex;
				height: 150rpx;

				.pic {
					margin: 30rpx 20rpx 0;
					text-align: center;
					line-height: 120rpx;
					font-size: 26rpx;
					color: #fff;
					flex: 1;
					background-size: 100% 100%;

					&:nth-child(1) {
						background-image: url('/static/images/myorder-icon1.png');
					}

					&:nth-child(2) {
						background-image: url('/static/images/myorder-icon2.png');
					}

					&:nth-child(3) {
						background-image: url('/static/images/myorder-icon3.png');
					}
				}
			}

			.bottom {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;
				margin-bottom: 40rpx;

				.box {
					width: 25%;
					text-align: center;
					margin-bottom: 20rpx;

					.pic {
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 0 auto;
						width: 110rpx;
						height: 92rpx;

						image {
							width: 60%;
							height: 60%;
						}
					}
				}

			}

			.placeholder {
				height: 15.33vw;
			}

			/deep/ .u-button {
				width: 80%;
				background-color: #D9D9D9;
				color: #fff;
			}

		}

		.share {
			padding: 10rpx 30rpx;
			height: 580rpx;

			.title {
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #c9c9c9;
			}

			.box {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin: 10rpx 0;

					&:nth-child(1) .pic {
						background-color: #1AAD19;
					}

					&:nth-child(2) .pic {
						background-color: #A8E450;
					}

					&:nth-child(3) .pic {
						background-color: #358BFF;
					}

					&:nth-child(4) .pic {
						background-color: #FFCE41;
					}

					&:nth-child(5) .pic {
						background-color: #EE3F44;
					}

					&:nth-child(6) .pic {
						background-color: #FCC00A;
					}

					.pic {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						margin: 0 10rpx 10rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

				}

			}
		}
	}
</style>